<template>
  <div>
    <el-row :gutter="16" style="width: 100%">
      <el-col :span="16">
        <el-card>
          <div ref="textDiv">
            <div v-for="item in msData">
              <h2 class="hClass">{{item.title}}</h2>
              <div class="textDiv">
                <span v-html="formData[item.value]"></span>
              </div>
            </div>
          </div>
          <h2 class="hClass">解决方案</h2>
<!--          <vxe-button transfer class="whbtn">-->
<!--            <template v-slot>{{statusFilterOptions(formData.Status, 'TEST_STATUS')}}</template>-->
<!--            <template v-slot:dropdowns>-->
<!--              <vxe-button v-for="(item) in statusList('TEST_STATUS')"-->
<!--                          @click.native="changeStatus(item.DictId)" type="button"-->
<!--                          :label="item.DictId" :key="item.DictId">{{item.DictName}}</vxe-button>-->
<!--            </template>-->
<!--          </vxe-button>-->
          <div v-if="isShowEditBtn()">
            <span class="btns-txt">操作</span>
            <el-radio-group size="medium" class="btns-btnE">
              <el-radio-button @click.native="changeStatusE('123')">编辑</el-radio-button>
            </el-radio-group>
          </div>
          <div v-for="(item1, index) in buttons" style="margin-top: 10px">
            <span class="btns-txt">{{item1.title}}</span>
            <el-radio-group v-model="formData.Status" @change="changeStatus"
                            size="medium" class="btns-btn">
              <el-radio-button v-for="(item) in statusList('TEST_STATUS', item1.dictId)"
                               @click.native="changeStatus(item.DictId)"
                               :label="item.DictId" :key="item.DictId">{{item.DictName}}</el-radio-button>
            </el-radio-group>
          </div>
<!--          <el-radio-group style="margin-top: 10px" v-model="formData.Status" @change="changeStatus"-->
<!--                          size="medium">-->
<!--            <el-radio-button v-for="(item) in statusList('TEST_STATUS')" @click.native="changeStatus(item.DictId)"-->
<!--                             :label="item.DictId" :key="item.DictId">{{item.DictName}}</el-radio-button>-->
<!--          </el-radio-group>-->
<!--          <el-radio-group style="margin-top: 10px" v-model="formData.Bussconfirmstatus" @change="changeStatus1" size="medium">-->
<!--&lt;!&ndash;            <el-radio-button v-if="btnPermissionUtil.getBtnbtnPermission('test-view-buss-confirm') && formData.Status=== '40'" label="101">业务确认</el-radio-button>&ndash;&gt;-->
<!--&lt;!&ndash;            <el-radio-button v-if="btnPermissionUtil.getBtnbtnPermission('test-view-need-confirm') && formData.Status=== '40'" label="102">客户确认</el-radio-button>&ndash;&gt;-->
<!--          </el-radio-group>-->
        </el-card>
        <div style="height: 10px"></div>
        <el-card v-if="formData.Id && formData.Id !== '0' && formData.Attachment.length > 0">
          <h2 class="hClass">附件下载</h2>
          <div>
            <a :href="formData.Attachment" target="_blank">{{formData.Attachment.split('/')[formData.Attachment.split('/').length - 1]||'附件预览'}}</a>
          </div>
        </el-card>
        <div style="height: 10px"></div>
        <el-card>
          <h2 class="hClass" style="display: inline-block; margin-right: 10px">评论</h2>
          <vxe-button type="text" status="success" content="添加评论" @click="addComentBtn"></vxe-button>
          <div class="coment" ref="coment">
            <div v-for="(item, index) in commentList" :key="index">
              <div v-if="item.Comment.length > 0 || item.Attachment.length > 0" class="coment-item">
                <span v-html="item.Comment"></span>
                <div style="display: flex; justify-content: space-between; margin: 0 10px 0 0">
                  <span><a :href="item.Attachment" target="_blank">{{item.Attachmentname || item.Attachment.split('/')[item.Attachment.split('/').length - 1]}}</a></span>
                  <span style="float: right">
                  {{`${item.UserName}在${formatDateStringFun(item.Created)}发表了评论`}}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <div style="width: 20px"></div>
      <el-col :span="8">
        <el-card class="rightSpan">
          <el-row v-for="item in typeItem" :key="item.title">
            <el-col :span="4">
              <span>{{item.title}}</span>
            </el-col>
            <el-col :span="19" :offset="1">
              <span v-if="item.type === 'a'"><a @click.prevent="linkClick" :href="`/view/project/test/${formData.Projectid}`">{{item.format(formData)}}</a></span>
              <span v-else>{{item.format(formData)}}</span>
            </el-col>
          </el-row>
        </el-card>
        <div style="height: 10px"></div>
        <el-card>
          <h2 class="hClass">历史记录</h2>
          <ul style="margin-left: 20px;font-size: 16px">
            <li v-for="(item, index) in historyList" :key="index" style="margin: 5px 0">
              <div>
                <span>{{formatDateStringFun(item.Created)}}</span>
                <span v-html="`&nbsp${item.Note}`"></span>
                <!--                    <span>{{statusFilterOptions(item.Status, 'TEST_STATUS')}}</span>-->
              </div>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>
    <task-edit-dialog :visible.sync="taskEditDialogVisible" :taskEditDialogType="taskEditDialogType" title="解决方案"
                      :preFormData="dialogFormData" @saveClose="saveClose" :isShowVersion="isShowVersion" :clickModel.sync="clickModel"
                      :isShowCL="isShowCL"
    ></task-edit-dialog>
    <bigImage :visible.sync="bigImageVisible" :src="bigImageSrc"></bigImage>
    <TestAdd :visible.sync="addVisible" title="反馈管理" :formData="addData" :editModel="editModel"></TestAdd>
    <el-image
        ref="elImage"
        class="elImageClass"
        style="width: 1px; height: 1px"
        :src="bigImageSrc"
        :preview-src-list="imgListS">
    </el-image>
  </div>
</template>

<script>
import dialogEdit from '@/components/element/dialogEdit'
import projectTestApi from "@/api/projectTestApi";
import tipTap from "@/components/element/tipTap";
import bigImage from "@/components/element/bigImage";
import TaskEditDialog from "@/page/ProjectManage/modules/task/TaskEditDialog";
import {mapGetters} from "vuex";
import { formatDateString } from '@/utils/date'
import TestAdd from "./TestAdd";

export default {
  name: 'testShow',
  components: {
    dialogEdit,
    TaskEditDialog,
    tipTap,
    bigImage,
    TestAdd
  },
  mounted() {
    this.search()
    this.imgListS = []
  },
  computed: {
    formatDateStringFun () {
      return (d) => {
        return formatDateString(d * 1000, 'yyyy-MM-dd hh:mm:ss')
      }
    },
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    },
    ...mapGetters(['dictionary']),
    statusList() {
      return (DictTypeCode, dicts) => {
        let a = this.dictionary.filter(item => item.DictTypeCode === DictTypeCode)
        if (dicts) {
          a = a.filter(it => dicts.some(it1 => it1.toString() === it.DictId))
        }
        return a
      }
    },
    statusFilterOptions() {
      return (cellValue, DictTypeCode) => {
        let filter = this.statusList(DictTypeCode).filter(it => it.DictId === (cellValue||'').toString())
        if (filter.length > 0) {
          return filter[0].DictName
        }
        return ''
      }
    }
  },
  props: {
    visible: {
      type: Boolean,
      default() {
        return false;
      }
    },
    // formData: {
    //   type: Object,
    //   default() {
    //     return {};
    //   }
    // }
  },
  data() {
    return {
      clickModel: '',
      isShowVersion: false,
      isShowCL: false,
      imgListS: [],
      addVisible: false,
      addData: {},
      editModel: 'E',
      buttons: [
        {
          title: '需求',
          dictId: [
            10, 11, 12
          ]
        },
        {
          title: '业务验收',
          dictId: [
            40, 41, 42
          ]
        },
        {
          title: '客户验收',
          dictId: [
            50, 51, 70, 80, 81, 82, 90
          ]
        },
        {
          title: '开发',
          dictId: [
            20, 21, 22, 30, 31, 32
          ]
        }
      ],
      pidVisible: false,
      formData: {},
      bigImageSrc: '',
      bigImageVisible: false,
      taskEditDialogType: '',
      Status: '',
      dialogFormData: {},
      taskEditDialogVisible: false,
      loading: false,
      activeNames: ['1', '2'],
      msData: [
        {
          title: '反馈描述',
          value: 'Desc'
        },
        {
          title: '根本原因',
          value: 'RootCause'
        },
        {
          title: '直接原因',
          value: 'DirectCause'
        },
        {
          title: '对应策略',
          value: 'CorrespondingStrategy'
        },
        {
          title: '规避策略',
          value: 'EvasiveStrategy'
        }
      ],
      typeItem: [
        {
          title: '反馈编号',
          type: 'a',
          format: (item) => {
            return item.Id
          },
        },
        // {
        //   title: '任务编号',
        //   format: (item) => {
        //     return item.Taskid
        //   },
        // },
        {
          title: '反馈标题',
          format: (item) => {
            return item.Name
          },
        },
        {
          title: '分类',
          format: (item) => {
            return this.statusFilterOptions((item.Type), 'TEST_TYPE')
          },
        },
        {
          title: '优先级',
          format: (item) => {
            return this.statusFilterOptions(item.Level|'', 'LEVEL')
          },
        },
        // {
        //   title: '状态',
        //   format: (item) => {
        //     return this.statusFilterOptions(this.Status.toString()|'', 'TEST_STATUS')
        //   },
        // },
        {
          title: '指派人',
          format: (item) => {
            return item.Acceptrealname
          },
        },
        {
          title: '验收部门',
          format: (item) => {
            return item.Uatdepartname
          },
        },
        {
          title: '完成者',
          format: (item) => {
            return item.Completerealname
          },
        },
        {
          title: '操作系统',
          format: (item) => {
            return item.Os
          },
        },
        {
          title: '浏览器',
          format: (item) => {
            return item.Browser
          },
        },
        {
          title: '验收环境',
          format: (item) => {
            return this.statusFilterOptions((item.Acceptevn || '').toString(), 'TEST_YSHJ')
          },
        },
        {
          title: '反馈环境',
          format: (item) => {
            if (item.hasOwnProperty('Env')) {
              return this.statusFilterOptions(item.Env.toString(), 'ENV')
            } else {
              return ''
            }
          },
        },
        {
          title: '预计工时',
          format: (item) => {
            return (item.Estimatedtasktime || '0') + '时'
          },
        },
        {
          title: '实际工时',
          format: (item) => {
            return (item.Actualtasktime || '0') + '时'
          },
        }
      ],
      components: [
        {
          label: '名称',
          span: 24,
          placeholder: '请输入名称',
          prop: 'Name',
          value: 'Name',
          componentName: 'vxe-input'
        },
        {
          label: '描述',
          span: 24,
          placeholder: '请输入描述',
          prop: 'Summary',
          value: 'Summary',
          componentName: 'vxe-textarea',
          autosize: {
            minRows: 10
          }
        }
      ],
      historyList: [],
      commentList: [],
      commentValue: {
        Comment: ''
      },
      formRules: {
        Comment: [{required: true, message: '请勿添加空评论', trigger: 'change'}]
      }
    }
  },
  methods: {
    isShowEditBtn () {
      return this.$store.getters.userId === this.formData.Userid
    },
    // 编辑
    changeStatusE () {
      this.addData = JSON.parse(JSON.stringify(this.formData))
      this.editModel = 'E'
      this.addVisible = true
    },
    // 点击返回
    linkClick () {
      this.$router.push(`/view/project/test/${this.formData.Projectid}`)
    },
    // 查询上一次
    search () {
      let w = {
        id: this.$router.currentRoute.params.pid
      }
      projectTestApi.getDataById(w).then(res => {
        if (res && res.Tests) {
          this.formData = res.Tests[0]
          this.pidVisible = true
        } else if (null === res.Tests) {
          this.$message.error('获取反馈信息失败')
        } else {
          this.$message.error('系统错误')
        }
      }).catch(a => {
        this.$message.error(a)
      });
    },
    // 给所图片添加点击放大事件
    showBigImg (ref) {
      let that = this
      if (this.$refs[ref]) {
        let a = that.$refs[ref].getElementsByTagName('img')
        Array.prototype.slice.call(a).forEach((item, index) => {
          let src = item.getAttribute('src')
          if (that.imgListS.indexOf(src) === -1) {
            that.imgListS.push(src)
          }
          item.addEventListener('click', () => {
            if (!!src) {
              that.bigImageSrc = item.getAttribute('src')
              that.$nextTick(() => {
                if (that.$refs.elImage) {
                  that.$refs.elImage.clickHandler()
                }
              })
            }
          })
        })
      }
    },
    // 添加评论
    addComentBtn () {
      this.isShowVersion = false
      this.isShowCL = false
      this.taskEditDialogType = 'add1'
      this.dialogFormData = JSON.parse(JSON.stringify(Object.assign(this.formData, {
        id: this.formData.Id
      })))
      this.taskEditDialogVisible = true
    },
    submitComment() {
      // todo 没有接口
    },
    changeStatus1 (Status) {
      this.dialogFormData = JSON.parse(JSON.stringify(Object.assign(this.formData, {
        id: this.formData.Id
      })))
      this.dialogFormData.Status = Status
      projectTestApi.bussStatus(this.dialogFormData).then(res => {
        if (res.code === 1) {
          this.$XModal.message({ message: res.message, status: 'success' })
        } else {
          this.$XModal.message({ message: res.message, status: 'warning' })
        }
      })
    },
    changeStatus(Status) {
      let sts = []
      if (Status >= '22' && Status <= '32') {
        this.taskEditDialogType = 'edit'
      } else if (Status >= '10' && Status <= '21') {
        this.taskEditDialogType = 'edit1'
      } else {
        this.taskEditDialogType = 'add'
      }
      this.dialogFormData = JSON.parse(JSON.stringify(Object.assign(this.formData, {
        Status,
        id: this.formData.Id
      })))
      this.isShowVersion = [20, 21, 22, 30, 31, 32].some(it => it === Number(Status));
      this.isShowCL = [12].some(it => it === Number(Status));
      this.clickModel = Status
      this.taskEditDialogVisible = true
    },
    getHistoryList() {
      let query = {
        id: this.formData.Id
      }
      projectTestApi.getHistory(query).then(res => {
        if (res && res.length !== 0) {
          this.historyList = res.reverse()
          this.historyList.forEach(it => {
            it.Note = it.Note.replace('<br>', '')
          })
        } else {
          this.historyList = []
        }
      })
    },
    getCommetList() {
      let query = {
        id: this.formData.Id
      }
      projectTestApi.getComment(query).then(res => {
        if (res && res.length !== 0) {
          this.commentList = res
          this.$nextTick(_ => {
            this.showBigImg('coment')
          })
        } else {
          this.commentList = []
        }
        this.loading = false
      })
    },
    saveClose (formData) {
      this.Status = this.formData.Status
      this.formData = Object.assign(this.formData, formData)
      this.getHistoryList()
      this.getCommetList()
      this.$emit('saveClose')
    }
  },
  watch: {
    pidVisible: {
      handler(val) {
        if (val) {
          this.$nextTick(_ => {
            this.showBigImg('textDiv')
          })
          this.Status = this.formData.Status
          this.loading = true
          this.getHistoryList()
          this.getCommetList()
        } else {
          this.bigImageVisible= false
        }
      }
    },
    'visible': {
      handler(val) {
        if (val) {
          this.$nextTick(_ => {
            this.showBigImg('textDiv')
          })
          this.Status = this.formData.Status
          this.loading = true
          this.getHistoryList()
          this.getCommetList()
        } else {
          this.bigImageVisible= false
        }
      }
    },
    taskEditDialogVisible: {
      handler (n, o) {
        if (o && !n) {
          if (this.Status !== this.formData.Status) {
            this.formData.Status = this.Status
          }
        }
      }
    }
  }
}
</script>
<style scoped>
.btns-btnE  {
  margin-left: 10px;
}
.btns-btnE >>> .el-radio-button__inner {
  color: #606266 !important;
  background-color: #FFF !important;
  border-color: #DCDFE6 !important;
}
.btns-txt {
  width: 70px;
  display: inline-block;
  text-align: end;
  line-height: 36px;
}
.btns-btn {
  margin-left: 10px;
}
.textDiv >>> img {
  max-width: 100%;
}
.textDiv {
  width: 100%;
  height: auto;
  min-height: 10px;
  margin: 10px 0;
}

.hClass {
  color: #49586e;
  font-size: 20px;
}

.rightSpan span {
  font-size: 15px;
}

.rightSpan .el-row {
  margin-top: 10px;
}

.rightSpan .el-col:nth-child(2n) span {
  color: #65CEA7;
}
.coment {
  overflow: auto;
  border: 1px solid #EEEEEE;
  border-radius: 10px;
  padding: 20px
}
.coment-item {
  border-bottom: 1px dashed #EEEEEE;
  margin: 10px;
  padding: 5px 5px 5px 20px;
  border-radius: 3px;
  position: relative
}
.coment-item >>> img {
  max-width: 100%;
}
.whbtn >>> button:first-child {
  width: 200px;
  height: 40px;
}
.elImageClass /deep/ .el-icon-circle-close {
  color: #FFFFFF;
}
</style>
